<template>
  <div class="page">
    <div class="tight-container">
      <div class="page-brand">智能剪辑</div>
      <div class="grid-64">
        <div class="card-list grid-4">
          <div
            v-for="item in cardList"
            :key="item.name"
            class="card-item hover pointer g-card flex-c flex-v align-center"
            @click="openAddModal"
          >
            <img :src="item.img" alt="" class="img">
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
        <div class="data-box g-card">
          <div class="flex-b aling-center">
            <div class="card-name">剪辑数据</div>
            <TagList :list="tagList" />
          </div>
          <div class="grid-3">
            <div
              v-for="item in valueList"
              :key="item.name"
              class="value-item g-card hover"
            >
              <div class="name nowrap">{{ item.name }}</div>
              <div class="value">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-brand" style="margin-top: 35px">剪辑任务</div>
      <TabList :list="cardList2">
        <template slot-scope="{ item }">
          <div class="flex align-center tab-item">
            <img :src="item.img" alt="" class="icon">
            <div class="tab-item-name">{{ item.name }}</div>
          </div>
        </template>
      </TabList>
      <div class="query-box">
        <div class="prefix-form-item">
          <div class="prefix-label">任务名称</div>
          <el-input v-model="queryForm.name" placeholder="输入剪辑任务名称" />
        </div>
        <div class="prefix-form-item">
          <div class="prefix-label">剪辑状态</div>
          <el-select v-model="queryForm.status" placeholder="请选择剪辑状态">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="prefix-form-item">
          <div class="prefix-label">创建时间</div>
          <el-date-picker
            v-model="queryForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
        <div class="flex-e align-center">
          <el-button type="primary" size="small" style="margin-right: 10px">
            <i class="el-icon-search" style="margin-right: 3px;" />搜索
          </el-button>
          <el-button size="small">
            <i class="el-icon-refresh-left" style="margin-right: 3px;" />重置
          </el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="220"
          size="small"
          header-row-class-name="mao-table-head"
        >
          <el-table-column prop="name" label="任务名称" />
          <el-table-column prop="status" label="任务状态">
            <template slot-scope="scope">
              <div class="flex-b align-center">
                <span>{{ scope.row.status }}</span>
                <span>{{ scope.row.num }}/{{ scope.row.total }}</span>
              </div>
              <div class="progress-box rel">
                <div
                  class="value"
                  :style="{
                    width: (scope.row.num * 100) / scope.row.total + '%',
                  }"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="时间信息">
            <template slot-scope="scope">
              <div>创建时间：{{ scope.row.createTime }}</div>
              <div>最近更新时间：{{ scope.row.updateTime }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="todo" label="操作" width="200px">
            <template slot-scope="scope">
              <a
                v-for="item in scope.row.todo"
                :key="item"
                href="javascript:;"
                style="margin-right: 10px"
                class="link"
              >{{ item }}</a>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div class="flex-e pagination-box">
          <el-pagination
            :current-page="page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div> -->
      </div>
    </div>
    <AddModal ref="addModal" />
  </div>
</template>

<script>
import TagList from '@/components/TagList'
import TabList from '@/components/TabList'
import AddModal from './components/AddModal.vue'
export default {
  name: 'CreationSmart',
  components: { TagList, TabList, AddModal },
  data() {
    return {
      page: 1,
      total: 3,
      pageSize: 5,
      tableData: [
        {
          name: '326门店剪辑',
          status: '剪辑中',
          num: 22,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['复制', '删除']
        },
        {
          name: '326门店剪辑',
          status: '待剪辑',
          num: 0,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['编辑', '删除', '复制']
        },
        {
          name: '326门店剪辑',
          status: '已完成',
          num: 45,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['编辑', '删除', '查看成片', '复制']
        },
        {
          name: '326门店剪辑',
          status: '剪辑中',
          num: 22,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['复制', '删除']
        },
        {
          name: '326门店剪辑',
          status: '待剪辑',
          num: 0,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['编辑', '删除', '复制']
        },
        {
          name: '326门店剪辑',
          status: '已完成',
          num: 45,
          total: 45,
          createTime: '2024-02-02 02:02:39',
          updateTime: '2024-03-25 17:59:48',
          todo: ['编辑', '删除', '查看成片', '复制']
        }
      ],
      statusList: [],
      queryForm: {
        name: '',
        status: '',
        dateRange: []
      },
      cardList: [
        {
          img: require('@/assets/images/dashboard/s1.png'),
          name: '智能剪辑'
        },
        {
          img: require('@/assets/images/dashboard/s2.png'),
          name: '爆款剪辑'
        },
        {
          img: require('@/assets/images/dashboard/s3.png'),
          name: '脚本剪辑'
        },
        {
          img: require('@/assets/images/dashboard/s4.png'),
          name: '图文创作'
        }
      ],
      cardList2: [
        {
          img: require('@/assets/images/dashboard/s1.png'),
          name: '智能剪辑'
        },
        {
          img: require('@/assets/images/dashboard/s5.png'),
          name: '快速剪辑'
        },
        {
          img: require('@/assets/images/dashboard/s3.png'),
          name: '一键成片'
        },
        {
          img: require('@/assets/images/dashboard/s4.png'),
          name: '图文剪辑'
        }
      ],
      tagList: [{ name: '昨日' }, { name: '7天' }, { name: '30天' }],
      valueList: [
        { name: '剪辑任务数', value: '99' },
        { name: '剪辑视频数', value: '65810' },
        { name: '剪辑图片数', value: '125' }
      ]
    }
  },
  mounted() {},
  methods: {
    openAddModal() {
      this.$message.error('功能正在更新中即将上线')
      // this.$nextTick(() => {
      //   this.$refs.addModal.open()
      // })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.card-name{
  font-size: 20px;
}
.query-box {
  display: grid;
  grid-template-columns: 22% 22% 22% 1fr;
  grid-column-gap: 15px;
  margin-top: 20px;
}
.tab-item {
  .icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .tab-item-name {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }
}
.tab-item.active{
  .tab-item-name{
    color: rgba(0, 119, 255, 1);
  }
}
.grid-64 {
  display: grid;
  grid-template-columns: 65% 1fr;
  grid-column-gap: 40px;
  margin-top: 12px;
}
.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap:40px;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
}
.value-item {
  margin-top:28px;
  height: 125px;
  .name {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }
  .value {
    font-size: 20px;
    font-weight: 700;
    color: rgba(0, 0, 0, 1);
    margin-top: 30px;
  }
}
.card-item {
  transition: all 0.3s linear;
  &:hover {
    .img {
      transform: scale(1.08);
    }
  }
  .img {
    width: 150px;
    height: 150px;
  }
  .name {
    font-size: 20px;
    font-weight: 400;
    color: rgba(15, 15, 15, 1);
  }
}
</style>
